<div class="container">
  <div class="line-wrap">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
      <polyline points="5 5, 575 5, 575 200, 5 200" fill="none" class="g-rect-path" />
      <polyline points="5 5, 575 5, 575 200, 5 200" fill="none" class="g-rect-fill" />
    </svg>
    <button class="first">第一天</button>
    <button class="second">第二天</button>
  </div>
</div>


<style>
  body {
    font-size: 10px;
  }

  .container {
    width: 100%;
  }

  .line-wrap {
    width: 300px;
    margin: 0 auto;
    position: relative;
  }

  .circle-load-rect-svg {
    margin: 10px;
  }

  .g-rect-path {
    fill: none;
    stroke-width: 10;
    stroke: #d3dce6;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .g-rect-fill {
    fill: none;
    stroke-width: 10;
    stroke: #ff7700;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    /* animation: lineMove 2s ease-out infinite; */
    transition: all 1s ease-in-out;
  }

  /* @keyframes lineMove {
    0% {
      stroke-dasharray: 0, 1350;
    }

    100% {
      stroke-dasharray: 1350, 1350;
    }
  } */
  .first {
    position: absolute;
    top: 23px;
    left: 0;
  }

  .second {
    position: absolute;
    top: 23px;
    left: 100px;
  }
</style>

<script>
  const path = document.querySelector('.g-rect-fill')
  document.addEventListener('click', (e) => {
    console.log(e.target.classList)
    if (e.target.classList.value === "first") {
      path.style.strokeDasharray = "100, 1370"

    }

    if (e.target.classList.value === "second") {
      path.style.strokeDasharray = "300, 1370"

    }

  })
</script>